package com.example.myapplication.ui.screens


import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.LocalAbsoluteElevation
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.myapplication.ViewModel.TaskViewModel
import com.example.myapplication.ui.components.*

@Composable
fun Task(taskVM: TaskViewModel = viewModel()) {

    // 圆环高度
    var boxWithDp: Int
    // 获取屏幕高度
    with(LocalConfiguration.current) {
        boxWithDp = screenWidthDp / 2
    }

    // 生命周期,更新学年积分
    // 当taskVM.pointOfYear改变时调用
    LaunchedEffect(taskVM.pointOfYear) {
        taskVM.updatePointPercent()
        taskVM.updateTips()
    }

    // Modifier.fillMaxWidth()铺满全屏
    // Alignment.CenterHorizontally 横向居中
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Brush.verticalGradient(listOf(Color(0xFF149EE7), Color.White)))
    ) {
        Row(
            modifier = Modifier
                .statusBarsPadding()
                .height(appBarHeight),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = "学习任务",
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxWidth(),
                color = Color.White,
                fontSize = 18.sp
            )
        }

        LazyColumn(
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // 学习周期
            item {
                Text(
                    text = taskVM.taskDate,
                    textAlign = TextAlign.Center,
                    fontSize = 12.sp,
                    color = Color.White,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(8.dp)
                )
            }

            // 学习进度
            item {
                // contentAlignment 內容对齐方式
                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier
                        .height(boxWithDp.dp)
                        .padding(top = 10.dp)
                ) {
                    // 圆环
                    CircleRing(boxWithDp, taskVM)

                    // 进度数据
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Text(buildAnnotatedString {
                            append(taskVM.pointOfYear.toString())
                            withStyle(style = SpanStyle(fontSize = 12.sp)) {
                                append("分")
                            }
                        }, fontSize = 36.sp, color = Color.White)
                        Text(text = "学年积分", fontSize = 12.sp, color = Color.White)
                    }
                }
            }

            // 学习进度数据
            item {
                Row(
                    horizontalArrangement = Arrangement.SpaceEvenly,
                    modifier = Modifier
                        .fillMaxWidth()
                        .offset(y = (-40).dp)
                ) {
                    Column() {
                        Text(
                            text = "${taskVM.totalPointOfYear}分",
                            color = Color.White,
                            fontSize = 16.sp
                        )
                        Text(text = "学年规定积分", color = Color.White, fontSize = 12.sp)
                    }
                    Column() {
                        Text(
                            text = "${taskVM.totalPointOfYear - taskVM.pointOfYear}分",
                            color = Color.White,
                            fontSize = 16.sp
                        )
                        Text(text = "还差", color = Color.White, fontSize = 12.sp)
                    }
                }
            }

            // 学习明细
            item {
                Column(
                    modifier = Modifier
                        .clip(
                            RoundedCornerShape(
                                topStart = 16.dp,
                                topEnd = 16.dp
                            )
                        )
                        .fillMaxSize()
                        .background(Color.White)
                        .padding(top = 8.dp)
                        .padding(horizontal = 8.dp, vertical = 8.dp)
                ) {
                    Text(text = "学习明细", fontSize = 16.sp, color = Color(0xFF333333))
                    Text(text = "最近一周获得积分情况", fontSize = 14.sp, color = Color(0xFF999999))

                    // 折线图
                    ChartView(taskVM.pointsOfWeek, modifier = Modifier.padding(vertical = 8.dp))

                    // 折线图x轴文本
                    Row() {
                        taskVM.weeks.forEach {
                            Text(
                                text = it,
                                fontSize = 12.sp,
                                color = Color(0xff999999),
                                modifier = Modifier.weight(1f),
                                textAlign = TextAlign.Center
                            )
                        }
                    }

                    // 今日任务题型
                    Text(
                        text = taskVM.tips,
                        color = Color(0xff149ee7),
                        fontSize = 14.sp,
                        modifier = Modifier
                            .padding(vertical = 8.dp)
                            .clip(RoundedCornerShape(4.dp))
                            .background(Color(0x33149ee7))
                            .padding(8.dp)
                            .fillMaxWidth()
                    )

                    // 每日任务
                    DailyTaskContent()
                }
            }
        }
    }
}
